<template>
  <div class="app-nav">
    <div v-if="value">
      <el-select
        v-model="province"
        size="mini"
        filterable
        :disabled="disabled"
        placeholder="省"
        class="use-case"
        @change="$forceUpdate()"
      >
        <el-option
          v-for="(item, index) in provinceOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          @click.native="onProvinceSelect(index)"
        ></el-option>
      </el-select>
    </div>
    <div v-if="value">
      <el-select
        v-model="city"
        size="mini"
        filterable
        :disabled="disabled"
        placeholder="市"
        class="use-case"
        @change="$forceUpdate()"
      >
        <el-option
          v-for="(item, index) in cityOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          @click.native="onCitySelect(index)"
        ></el-option>
      </el-select>
    </div>
    <div v-if="value === '1'">
      <el-select
        v-model="area"
        size="mini"
        filterable
        :disabled="disabled"
        placeholder="区"
        class="use-case"
        @change="$forceUpdate()"
      >
        <el-option
          v-for="item in areaOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          @click.native="onAreaSelect"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Pagination',
  props: {
    value: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      provinceOptions: [],
      province: '',
      cityOptions: [],
      city: '',
      areaOptions: [],
      area: '',
    }
  },

  computed: {},
  mounted() {
    axios.get('./address.json').then((res) => {
      this.provinceOptions = res.data
    })
  },
  methods: {
    onProvinceSelect(index) {
      this.cityOptions = this.provinceOptions[index].citylist
      this.area = ''
      this.city = ''
      this.$emit('address', {})
    },
    onCitySelect(index) {
      this.areaOptions = this.cityOptions[index].arealist
      this.area = ''
      if (this.value != '1') {
        this.$emit('address', { province: this.province, city: this.city })
      } else {
        this.$emit('address', {})
      }
    },
    onAreaSelect() {
      this.$emit('address', {
        province: this.province,
        city: this.city,
        area: this.area,
      })
    },
    //刷新初始值
    parentHandleclick(e) {
      this.province = e.province
      if (e.province == 0) {
        this.province = ''
      } else {
        this.province = e.province
      }

      this.getCityList(this.province)
      if (e.city == 0) {
        this.city = ''
      } else {
        this.city = e.city
      }
      this.getAreaList(this.city)
      if (e.area == 0) {
        this.area = ''
      } else {
        this.area = e.area
      }
    },
    /**
     * 通过省id查找市集合
     */
    getCityList(province_id) {
      if (province_id) {
        this.provinceOptions.forEach((city) => {
          if (city.id === province_id) {
            this.cityOptions = city.citylist
          }
        })
      }
    },
    /**
     * 通过市id查找区集合
     */
    getAreaList(city_id) {
      if (city_id) {
        this.cityOptions.forEach((area) => {
          if (area.id === city_id) {
            this.areaOptions = area.arealist
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped >
.app-nav {
  display: flex;
  align-items: center;
  .use-case {
    width: 160px;
    margin-right: 10px;
  }
}
</style>
